<template>
  <div>

    <van-form @submit="onSubmit" label-align="left">
      <div class="upimg">
        <van-field name="uploader" label-width="100%" label="方式一：行驶证扫描" style="font-weight: 600">
          <template #input>
            <van-uploader :max-count="1" :after-read="upafter" v-model="uploader" />
          </template>
        </van-field>
      </div>
    </van-form>


        <div>
          <div  style="width: 100%;margin-left:16px;font-weight: 600;font-size:14px;"><span>方式二：填写资料</span></div>
          <van-panel title="标题" desc="描述信息" status="状态">
            <div class="keyboardCont">
              <keyboard ref="cropperImgFun" :boradArr="boradArr" :getboard="getboard"></keyboard>
            </div>
            <template #header>
              <div class="infotxt">
                <van-row type="flex" justify="space-between">
                  <van-col span="16">车辆信息：</van-col>
                </van-row>
              </div>
            </template>
          </van-panel>
          <van-action-sheet v-model="boardselectshow" :actions="actions" @select="onSelect" />
        </div>
        <van-form @submit="onSubmit" label-align="left">
          <div class="form_module">
            <div>
              <van-field
                readonly
                clickable
                name="picker"
                value="大众"
                label="品牌车型："
                placeholder="请输入车型"
                value-key="text"
              />
            </div>
            <div>
              <van-field
                readonly
                clickable
                name="picker"
                value="123231312313123"
                label="车架号："
                placeholder="请输入车架号"
              />
            </div>

            <div class="form_module">
              <div>
                <van-field
                  readonly
                  clickable
                  name="calendar"
                  :value="boradform.appointmentTime"
                  label="时间："
                  placeholder="点击选择日期"
                  @click="timesshowCalendar = true"
                />
                <van-datetime-picker type="datetime" v-if="timesshowCalendar" @confirm="timesonConfirm" />
              </div>
            </div>
          </div>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>




  </div>
</template>
<script>
  import { Toast } from "vant";
  import keyboard from "../components/keyboard";
  export default {
    components: {
      keyboard
    },
    data() {
      return {
        uploader: [],
        showCalendar: false,
        username: "",
        password: "",
        boradArr: [],
        value: "",
        seatcolumns: [
          { keyId: 1, text: "七座以下" },
          { keyId: 0, text: "七座以上" }
        ],
        accidentcolumns: [
          { keyId: 0, text: "无" },
          { keyId: 1, text: "有" }
        ],
        operationcolumns: [
          { keyId: 0, text: "否" },
          { keyId: 1, text: "是" }
        ],
        showPicker: false,
        seatshowPicker: false,
        accidentshowPicker: false,
        operationcshowPicker: false,
        timesshowCalendar: false,
        times: "",
        boardselectshow: false,
        actions: [],
        boradform: {
          size: "",
          accident: "",
          scale: "",
          appointmentTime: "",
          plateNumber: ""
        },
        oepnId: "",
        boradparams: {
          size: "",
          accident: "",
          scale: "",
          appointmentTime: "",
          plateNumber: ""
        },
      };
    },
    mounted() {
      // this.getopenID();

      var userinfo = JSON.parse(localStorage.getItem("userinfo"));
      if (userinfo == null) {
        this.getopenID();
      } else {
        this.oepnId = userinfo.openid;
        console.log(userinfo);
      }
      this.getseatcolumns();
      this.getoperation();
      this.getseat_spec();
      this.getcarlist();
    },
    methods: {
      upafter(file) {
        file.message = "上传中...";
        file.status = "uploading";
        var params = new FormData();
        params.append("file", file.file);
        this.file = file.file;
        this.axios
          .post("/personal/car_add_one", params)
          .then(res => {
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg + "请重新上传");

              file.status = "failed";
              file.message = "上传失败";
            } else {
              Toast.success(res.data.msg);
            }
          })
          .catch(err => {
            console.error(err);
          });
      },
      getUrlParam(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
        let r = window.location.search.substr(1).match(reg); // 匹配目标参数
        if (r != null) return decodeURIComponent(r[2]);
        return null; // 返回参数值
      },
      getopenID() {
        let code = this.$route.query.code || this.getUrlParam("code");
        // var state = this.$route.query.state || this.getUrlParam('state')
        var redirectUri = escape(window.location.href + "?state=true");
        var APPID = "wxd5c04a0b457efd8f";
        if (code) {
          var params = {
            code: code
          };
          this.axios
            .get("/api/index/get_openid", { params: params })
            .then(res => {
              var data = res.data;
              localStorage.setItem("userinfo", JSON.stringify(res.data));
              this.oepnId = res.data.data.openid;
              console.log(data);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          var wxopenidurl =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            APPID +
            "&redirect_uri=" +
            redirectUri +
            "&response_type=code&scope=snsapi_userinfo&state=true#wechat_redirect";
          window.location.href = wxopenidurl;
        }
      },
      getcarlist() {
        this.actions = [];
        var params = {
          oepnId: this.openId
        };
        this.axios
          .post("/careful/car_list", params)
          .then(res => {
            console.log(res);
            var list = res.data.data.list;
            list.forEach((i, k) => {
              this.actions.push({
                name: i.models,
                subname: "车牌号：" + i.plateNumber,
                value: i.plateNumber
              });
            });
          })
          .catch(err => {
            console.error(err);
          });
      },
      onSubmit(values) {
        this.boradparams.oepnId = this.oepnId;
        this.axios
          .post("/about/careful_add", this.boradparams)
          .then(res => {
            console.log(res);
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg + "请重新填写错误信息");
            } else {
              Toast.success(res.data.msg);
            }
          })
          .catch(err => {
            console.error(err);
          });
      },
      onClickRight() {
        this.$router.push("appointmentlist");
      },
      getboard(borad) {
        // console.log(borad)
        this.boradform.plateNumber = borad;
        this.boradparams.plateNumber = borad.join("");
      },
      // 事故
      getseatcolumns() {
        this.accidentcolumns = [];
        this.axios
          .post("/menu/accident")
          .then(res => {
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg);
              return false;
            }
            var data = res.data.data;
            data.forEach(element => {
              var data = { keyId: element.value, text: element.key };
              this.accidentcolumns.push(data);
            });
          })
          .catch(err => {
            console.error(err);
          });
      },
      // 维修项目
      getmaintenance_pro() {
        this.axios
          .post("/menu/maintenance_pro")
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.error(err);
          });
      },
      // 运营
      getoperation() {
        this.operationcolumns = [];
        this.axios
          .post("/menu/operation")
          .then(res => {
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg);
              return false;
            }
            var data = res.data.data;
            data.forEach(element => {
              var data = { keyId: element.value, text: element.key };
              this.operationcolumns.push(data);
            });
          })
          .catch(err => {
            console.error(err);
          });
      },
      // 座位规格
      getseat_spec() {
        this.seatcolumns = [];
        this.axios
          .post("/menu/seat_spec")
          .then(res => {
            if (res.data.code !== 10000) {
              Toast.fail(res.data.msg);
              return false;
            }
            var data = res.data.data;
            data.forEach(element => {
              var data = { keyId: element.value, text: element.key };
              this.seatcolumns.push(data);
            });
            // this.seatcolumns=
          })
          .catch(err => {
            console.error(err);
          });
      },
      // 保修项目
      getwarranty_pro() {
        this.axios
          .post("/menu/warranty_pro")
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.error(err);
          });
      },
      seatonConfirm(value) {
        console.log(value);
        // var value = value.text
        this.boradform.size = value.text;
        this.boradparams.size = value.keyId;
        this.seatshowPicker = false;
      },
      accidentonConfirm(value) {
        this.boradform.accident = value.text;
        this.boradparams.accident = value.keyId;
        this.accidentshowPicker = false;
      },
      operationConfirm(value) {
        this.boradform.scale = value.text;
        this.boradparams.scale = value.keyId;
        this.operationcshowPicker = false;
      },
      onConfirm(date) {
        this.value = `${date.getMonth() + 1}/${date.getDate()}`;
        var timestamp = parseInt(new Date(date).getTime() / 1000);
        this.boradparams.appointmentTime = timestamp;
        this.showCalendar = false;
      },
      timesonConfirm(times) {
        var date = times;
        var timestamp = parseInt(new Date(times).getTime() / 1000);
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (m >= 1 && m <= 9) {
          m = "0" + m;
        }
        if (d >= 0 && d <= 9) {
          d = "0" + d;
        }
        var timer = date.getFullYear() + "-" + m + "-" + d;
        this.boradform.appointmentTime = timer;
        this.boradparams.appointmentTime = timestamp;
        this.timesshowCalendar = false;
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.boardselectshow = false;
        this.boradparams.plateNumber = item.value;
        this.boradArr = item.value.split("");
      }
    }
  };
</script>
<style  scoped>
  .upimg .van-cell {
    flex-flow: column;
  }
  .annual-tabs {
    margin-top:20px ;
    width:100%;
  }
  .infotxt {
    height: 34px;
    line-height: 34px;
    text-align: left;
    padding: 9px 40px;
    font-size: 17px;
  }
  .keyboardCont {
    margin: 0;
    padding-bottom: 0;
  }
</style>
<style >
  .van-field__label {
    text-align: left;
  }
</style>
